<template>
  <div style="height:100%">
    <List border
          size="small">
      <ListItem v-for="(e,i) in lists"
                :key="i">
        {{e.filename}}
        <span style="color: #999;font-size: 12px;margin-left: 20px;">-- {{e.singername}}</span>
        <a @click="play(e)">播放</a>
      </ListItem>
    </List>
  </div>
</template>

<script>
import api from '../utils/api'

export default {
  computed: {
    lists () {
      return this.$store.state.music.lists
    }
  },
  methods: {
    play (e) {
      api.musicUrl(e.hash, e.album_id, (res) => {
        let data = res.data.data
        let el = {
          title: data.album_name,
          artist: data.author_name,
          src: data.play_url,
          pic: data.img
        }
        this.$store.commit('music/select', el)
      })
    }
  }
}
</script>

<style scopt>
</style>